import React,{Component} from 'react';
import { StyleSheet, Text, View,FlatList,Dimensions, ActivityIndicator,Image,ScrollView} from 'react-native';
import { Container, Header, Content, List, ListItem,Thumbnail,Icon,Item,Button,Input,Left, Body, Right, Switch } from 'native-base';
import { fetchList,addCart,update,deleteCart} from "../actions"
import { connect } from 'react-redux';


const mapStateToProps=(state)=>{
    return{
        list:state.list.list
    }
}
class Productdetial extends Component{
    addProductToCart=(list)=>{
        // console.log('list',list.item); 
        this.props.addCart(list.item);
    }
   render(){
       const {title,img,content,time,stars}=this.props.item;
       return(
           <ScrollView style={{flexDirection:'column'}}>
               <View style={{width:'auto',height:'auto'}}>
                    <Image source={{uri:img}} style={{width:Dimensions.get('window').width,height:200,margin:'auto'}}/>
               </View>
               <View style={{width:Dimensions.get('window').width,height:80,backgroundColor:'#20bfa8',flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:'white',fontSize:20,flex:1,paddingLeft:15}}>{stars.number}元</Text>
                    <View style={{flex:3,width:'auto',height:'auto'}}>
                        <Image source={require('../assets/10.png')} style={{width:'auto',height:80}}/>
                    </View>
               </View>
               <View style={{padding:20,backgroundColor:'white'}}>
                   <Text style={{fontSize:25}}>{title}</Text>
                   <Text style={{fontSize:15,color:'#888'}} numberOfLines={1}>{content}</Text>
               </View>
               <View>
                   <Image source={require('../assets/11.png')} style={{width:Dimensions.get('window').width,height:80}} />
               </View>
               <View style={{padding:20,backgroundColor:'white'}}>
                   <Text style={{fontSize:25}}>详细内容</Text>
                   <View style={{flexDirection:'row'}}>
                   <Text style={{fontSize:15,flex:1,justifyContent:'center',alignItems:'center'}}>{title}</Text>
                   <Text style={{flex:1,justifyContent:'flex-end',alignItems:'center',textAlign:'right'}}>{stars.number}元</Text>
                   </View>
               </View>
               <View>
                   <Image source={require('../assets/12.png')} style={{width:Dimensions.get('window').width,height:300}}/>
               </View>
               <View style={{flexDirection:'row',backgroundColor:'white',justifyContent:'center',width:Dimensions.get('window').width,height:'auto',paddingTop:20}}>
                        <View style={{flexDirection:'column',flex:1,alignItems:'center'}}>
                            <Icon name="home"/>
                            <Text>门店</Text>
                        </View>
                        <View style={{flexDirection:'column',flex:1,alignItems:'center'}}>
                            <Icon name="heart-empty"/>
                            <Text>收藏</Text>
                        </View>
                        <Button rounded light style={{flex:3}} onPress={()=>this.addProductToCart(this.props)}>
                            <Text>购买此商品</Text>
                        </Button>
                </View>
            </ScrollView>
       )
    }
}
export default connect (mapStateToProps,{fetchList,addCart,update,deleteCart})(Productdetial);